<template>
	<image
		class="ancestral_detail_bgc"
		:style="{ width: clientWidth + 'px' }"
		:src="cemeteryBgUrl"
		mode="cover"
	></image>
	<view class="return_box" :style="{ top: statusBarHeight + 'px' }">
		<image
			style="width: 64rpx; height: 64rpx"
			@click="back"
			:src="imgUrl + 'imgs/home/BACK.png'"
			mode=""
		></image>
	</view>
	<view class="templeContent">
		<view class="temple_detail_tablet">
			<!-- 牌位 -->
			<view class="tablet_box">
				<view class="temple_detail_tablet_item" v-for="(item, index) in numbersArray">
					<image src="http://112.124.50.179:8888/imgs/home/tablet.png" mode=""></image>
					<view v-if="/\d/.test(item)" class="tablet_name">{{ item }}</view>
					<view v-else class="tablet_name tablet_name_chinese">
						{{ item }}
					</view>
				</view>
			</view>

			<!-- 祭品,轮播的形式 -->
			<view class="temple_oblation">
				<swiper
					class="oblationRow"
					circular
					:vertical="true"
					:autoplay="true"
					:interval="3000"
					:disable-touch="true"
					ss
				>
					<swiper-item v-for="(items, index) in Math.ceil(oblationList.list.length / 8)">
						<image
							v-for="(item, index) in oblationList.list.slice(
								(items - 1) * 8,
								items * 8
							)"
							:src="item.imageUrl"
							mode=""
						></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 金灯 -->
			<view class="jindeng_box" v-if="dataObj.lightUp === 1">
				<image
					:src="imgUrl + 'imgs/home/jindeng.png'"
					mode=""
					v-for="(item, index) in 2"
				></image>
			</view>
		</view>

		<view class="temple_detail">
			<!-- 
			装修祠堂 
			不展示的情况：
			1、动画特效
			2、装修弹框
			3、为普通成员
			-->
			<view
				class="fixed_con_"
				v-if="!showAnimation && !showDecoration && (userType === 1 || userType === 2)"
				@click="openRenovationTemple"
			>
				<image
					src="http://112.124.50.179:8888/imgs/home/temple_decorate.png"
					mode=""
				></image>
				<view>装修祠堂</view>
			</view>
			<!-- 牌匾 -->
			<view class="temple_detail_name">
				<!-- <image
					:src="
						dataObj.renotePaibian
							? dataObj.renotePaibian
							: 'http://112.124.50.179:8888/imgs/home/temple_name.png'
					"
					mode=""
				></image> -->
				<view class="temple_detail_name_text">{{ convertString(dataObj.hao) }}</view>
			</view>
		</view>
		<view class="invite" v-if="!showAnimation && !showDecoration" @click="copyInviteCode">
			复制邀请码
			<image src="http://112.124.50.179:8888/imgs/home/copy.png"></image>
		</view>
		<view class="fixed" v-if="!showAnimation && !showDecoration">
			<Bubble :list="dataObj.consecrateList || []" />
			<view class="fixed_con">
				<!-- <view class="fixed_con_" @click="openLeaveMess">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func1.png"
						mode=""
					></image>
					<text>留言</text>
				</view> -->
				<view class="fixed_con_" @click="addOilRef.show = true">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func2.png"
						mode=""
					></image>
					<text>香油</text>
				</view>
				<view class="fixed_con_" @click="openOblation">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func3.png"
						mode=""
					></image>
					<text>祭品</text>
				</view>
				<view class="fixed_con_" @click="koubaiRef.show = true">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func4.png"
						mode=""
					></image>
					<text>行礼</text>
				</view>
				<view
					class="fixed_con_"
					@click="goUrl('/subPages/home/ancestralTemple/brief_introduction')"
				>
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func5.png"
						mode=""
					></image>
					<text>简介</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 右边功能 -->
	<view
		v-if="!showAnimation && !showDecoration"
		class="temple_detail_funcList"
		:style="{ right: windowWidth / 2 - clientWidth / 2 + 20 + 'px' }"
	>
		<view class="temple_detail_fucItem">
			<image
				:src="imgUrl + 'imgs/home/temple_music.png'"
				mode=""
				:class="['rotating-element', !musicPlay && 'paused']"
				@click="clickMusic"
			></image>
			音乐
		</view>
		<view class="temple_detail_fucItem" @click="goUrl('/subPages/home/ancestralTemple/tablet')">
			<image :src="imgUrl + 'imgs/home/temple_pai.png'" mode=""></image>
			牌位信息
		</view>
		<!-- 当非本人，且真实祠堂未编辑的时候，不展示此按钮 -->
		<view
			v-if="userType == 1 || dataObj.real === 1"
			class="temple_detail_fucItem"
			@click="
				goUrl('/subPages/home/ancestralTemple/position?isDetail=' + (userType != 1 ? 1 : 0))
			"
		>
			<image :src="imgUrl + 'imgs/home/temple_real.png'" mode=""></image>
			真实祠堂
		</view>
		<view class="temple_detail_fucItem" @click="showMore">
			<image :src="imgUrl + 'imgs/home/temple_more.png'" mode=""></image>
			更多
		</view>
	</view>

	<!-- 特效 -->
	<view class="texiao_box">
		<view class="gif">
			<image class="gb" :src="imgUrl + '/imgs/home/gb.gif'" v-if="animation.gb"></image>
			<image class="jg" :src="imgUrl + '/imgs/home/jg.gif'" v-if="animation.jg"></image>
		</view>
	</view>

	<u-popup
		:show="showMoreFunc"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<u-button
			v-if="userType == 1 || userType == 2"
			@click="goUrl('/subPages/home/ancestralTemple/memorial_tablet')"
			shape="circle"
			:custom-style="{
				...moreBtnStyle,
				marginBottom: 0,
				borderRadius: '26rpx 26rpx 0 0'
			}"
		>
			牌位管理
		</u-button>
		<u-button
			v-if="userType == 1"
			@click="goUrl('/subPages/home/ancestralTemple/setting')"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '0' }"
		>
			祠堂设置
		</u-button>
		<u-button
			v-if="userType == 1 || userType == 2"
			@click="
				goUrl(
					'/subPages/home/ancestralTemple/friendGroup?dataObj=' + JSON.stringify(dataObj)
				)
			"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '0' }"
		>
			祠堂族员管理
		</u-button>
		<u-button
			@click="goUrl('/subPages/home/ancestralTemple/Memorial')"
			shape="circle"
			:custom-style="{
				...moreBtnStyle,
				marginBottom: 0,
				borderRadius: userType == 3 ? '26rpx 26rpx 0 0' : 0
			}"
		>
			供奉记录
		</u-button>
		<u-button
			shape="circle"
			@click="openInvite"
			:custom-style="{
				...moreBtnStyle,
				marginBottom: 0,
				borderRadius: userType == 1 ? '0 0 26rpx 26rpx' : 0
			}"
		>
			分享
		</u-button>
		<u-button
			v-if="userType == 2 || userType == 3"
			shape="circle"
			@click="report"
			:custom-style="{
				...moreBtnStyle,
				marginBottom: 0,
				borderRadius: ' 0 0 26rpx 26rpx'
			}"
		>
			举报
		</u-button>

		<u-button
			shape="circle"
			:custom-style="{
				...moreBtnStyle,
				fontWeight: 600,
				borderRadius: '26rpx',
				marginTop: '16rpx'
			}"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>

	<!-- 送取祭品 -->
	<oblation ref="oblationRef" :offeringType="5" @finish="finishOblation" />

	<!-- 留言弹框 -->
	<leaveMess ref="leaveMessRef" />

	<!-- 添香油弹框 -->
	<addOil ref="addOilRef" @finish="query" />

	<!-- 行礼弹框 -->
	<koubai ref="koubaiRef" @koubai="handleKoubai"></koubai>

	<!-- 装修弹框 -->
	<RenovationTemple
		ref="RenovationTempleRef"
		:id="hallId"
		@close="closeRenovation"
		@previewBgc="previewBgc"
		@query="query"
		:belongingTo="5"
	/>
	<sharePopup
		v-model:show="showShare"
		title="分享到"
		height="592rpx"
		:invitedCode="dataObj.invitationCode"
		:isInvitedCode="true"
	></sharePopup>

	<!-- 购买动画效果 -->
	<buyAni ref="buyAniRef" :pics="aniPics" />
</template>

<script setup>
import {
	reactive,
	onMounted,
	ref,
	getCurrentInstance,
	nextTick,
	onUnmounted,
	onBeforeUnmount
} from 'vue';
import {
	onUnload,
	onShow,
	onLoad,
	onHide,
	onReady,
	onPageScroll,
	onReachBottom
} from '@dcloudio/uni-app';
import oblation from '@/subPages/common/oblation.vue';
import buyAni from '@/subPages/common/buyAni.vue';
import { imgUrl } from '@/external/utils/imgUrl';
import RenovationTemple from '../common/renovation_memoryHall.vue';
import leaveMess from '../common/leaveMess.vue';
import addOil from '../common/addOil.vue';
import koubai from '@/subPages/common/koubai.vue';
import sharePopup from '/components/popup/share.vue';
import Bubble from '@/components/bubble/index.vue';
import store from '@/store/index.js';
import HomeApi from '@/API/home/index.js';
import CommonApi from '@/API/commenApi';

const commonApi = new CommonApi();
const homeApi = new HomeApi();

const statusBarHeight = getApp().globalData.statusBarHeight;
const windowWidth = uni.getSystemInfoSync().windowWidth;
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().windowWidth;
const numbersArray = ref([
	9, 7, 5, 3, 1, 2, 4, 6, 8, 10, 19, 17, 15, 13, 11, 12, 14, 16, 18, 20, 29, 27, 25, 23, 21, 22,
	24, 26, 28, 30, 39, 37, 35, 33, 31, 32, 34, 36, 38, 40, 49, 47, 45, 43, 41, 42, 44, 46, 48, 50
]);

const tabletList = ref(new Array(19).fill('')); //牌位信息
const showMoreFunc = ref(false);
const moreBtnStyle = {
	height: '120rpx',
	backgroundColor: '#fff',
	fontWeight: '400',
	fontSize: '40rpx',
	color: '#007AFF',
	marginBottom: '16rpx'
};
const showShare = ref(false);
let height = ref('0');
let navHeight = ref('0');
let tabIndex = ref(0);
let userType = ref(-1);
let showDecoration = ref(false); //是否展示装修弹框
let dataObj = ref({});
const oblationRef = ref();
const RenovationTempleRef = ref();
const leaveMessRef = ref();
const addOilRef = ref();
const koubaiRef = ref();
const buyAniRef = ref(); //购买动画
const aniPics = ref([]); //购买的图片

const ybCoinNumber = ref(0); //福币余额
const userName = ref(''); //用户名称
const inviteCode = ref(); //邀请码
const hallId = ref(); //祠堂id
//购买的祭品列表
const oblationList = reactive({
	list: []
});

//动画
const animation = reactive({
	jg: false,
	gb: false
});
const showAnimation = ref(false);
let timer = ref(null);

//音乐播放
const musicPlay = ref(true);
const musicUrl = ref();
let innerAudioContext = null; //音乐对象

//背景
const cemeteryBgUrl = ref();

onShow(() => {
	// 牌位位移后重置
	numbersArray.value = [
		9, 7, 5, 3, 1, 2, 4, 6, 8, 10, 19, 17, 15, 13, 11, 12, 14, 16, 18, 20, 29, 27, 25, 23, 21,
		22, 24, 26, 28, 30, 39, 37, 35, 33, 31, 32, 34, 36, 38, 40, 49, 47, 45, 43, 41, 42, 44, 46,
		48, 50
	];
	//获取个人信息
	query();

	//打开音乐
	musicPlay.value = true;
	if (musicPlay.value) {
		innerAudioContext?.play();
	}
});
onLoad((options) => {
	//祠堂id
	hallId.value = uni.getStorageSync('hallId');

	if (options.showDecoration) {
		setTimeout(() => {
			openRenovationTemple();
		}, 1);
	}

	//祠堂已购买祭品获取
	getOfferingInfo();

	//获取音乐
	getMusic();

	//记录埋点
	enterObject();
});
// 页面卸载
onUnload(() => {
	innerAudioContext.destroy();
});
//页面后台
onHide(() => {
	console.log('onHide');
	showMoreFunc.value = false;
	if (musicPlay.value) {
		musicPlay.value = false;
		innerAudioContext.pause();
	}
	
	//关闭贡品弹框
	oblationRef.value.show = false;
});
const query = () => {
	homeApi
		.getHallInfoApi({
			hallId: hallId.value
		})
		.then((res) => {
			userType.value = res.data.userType;
			dataObj.value = res.data;

			//剩余福币
			ybCoinNumber.value = res.data.ybCoins;
			//福币同步到store
			store.state.userInfo.userInfo.ybCoinNumber = ybCoinNumber.value;

			//牌位信息展示
			res.data.tabletList?.forEach((ele, index) => {
				tabletList.value[ele.tabletIndex] = ele;
			});

			//背景
			cemeteryBgUrl.value = res.data.renovationList
				? res.data.renovationList[0]?.imageUrl
				: imgUrl + 'imgs/home/temple_defaultBgc.png';

			res.data.tabletList.forEach((item, i) => {
				numbersArray.value.forEach((ele, index) => {
					if (item.tabletIndex == ele) {
						numbersArray.value[index] = item.shixi;
					}
				});
			});
		});
};

/**
 * 记录埋点
 */
const enterObject = async () => {
	let res = await commonApi.enterObject({ Id: hallId.value, belongTo: 5 });
	if (res.code === 0) {
		console.log('记录埋点');
	}
};

/**
 * 打开祭品弹框
 */
const openOblation = () => {
	oblationRef.value.show = true;
};
const openRenovationTemple = () => {
	RenovationTempleRef.value.show = true;
	showDecoration.value = true;
};
/**
 * 打开留言弹框
 */
const openLeaveMess = () => {
	leaveMessRef.value.show = true;
};

const convertString = (str) => {
	if (str) {
		return str.split('').reverse().join('');
	}
};

const showMore = (item) => {
	showMoreFunc.value = true;
};
const closeMore = () => {
	showMoreFunc.value = false;
};
const setTab = (index) => {
	tabIndex.value = index;
};
const back = () => {
	let pages = getCurrentPages();
	if (pages.length > 1) {
		uni.navigateBack();
	} else {
		uni.reLaunch({
			url: '/pages/home/index/index'
		});
	}
};
const goUrl = (url) => {
	innerAudioContext.pause();
	uni.navigateTo({
		url: url
	});
};

const openInvite = () => {
	showShare.value = true;
};

const copyInviteCode = () => {
	uni.setClipboardData({
		data: dataObj.value.invitationCode,
		success: function () {
			uni.showToast({
				title: '复制成功'
			});
		},
		fail: function (err) {
			console.log('复制失败', err);
		}
	});
};
const report = () => {
	uni.navigateTo({
		url: '/subPages/chaoshan/report?reportType=7&&reportedId=' + uni.getStorageSync('hallId')
	});
};

/**
 * 叩拜行礼
 */
const handleKoubai = async (item, index) => {
	let res = await homeApi.saluteHall({
		hallId: uni.getStorageSync('hallId'),
		actionId: index
	});
	if (res.code === 0) {
		koubaiRef.value.show = false;
		showGif(index);
		query();
	}
};

/**
 * 展示动图
 */
const showGif = (type) => {
	if (type === 1) {
		//跪拜
		showAnimation.value = true;
		if (!timer.value) {
			animation.gb = true;
			timer.value = setTimeout(() => {
				animation.gb = false;
				timer.value = null;
				showAnimation.value = false;
			}, 6500);
		}
	} else if (type === 2) {
		//鞠躬
		showAnimation.value = true;
		if (!timer.value) {
			animation.jg = true;
			timer.value = setTimeout(() => {
				animation.jg = false;
				timer.value = null;
				showAnimation.value = false;
			}, 6500);
		}
	}
};

/**
 * 购买贡品成功
 */
const finishOblation = async (buyList) => {
	//获取个人信息，更新用户福币
	query();

	//购买动画
	aniPics.value = buyList;
	buyAniRef.value.show = true;

	// 动画结束后再执行
	//获取展示祭品
	setTimeout(() => {
		getOfferingInfo();
	}, 2000);
};

//获取个人祭拜的物品等信息
const getOfferingInfo = async () => {
	let res = await homeApi.getHallOffered({ hallId: hallId.value });
	if (res.code === 0) {
		oblationList.list = res.data.items || [];
	}
};

/**
 * 获取音乐
 */
const getMusic = async () => {
	let res = await commonApi.getMusicList({ Ids: 1 });
	if (res.code === 0) {
		musicUrl.value = res.data.items ? res.data.items[0].url : '';
		innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.autoplay = true;
		innerAudioContext.src = musicUrl.value;
		innerAudioContext.loop = true;

		nextTick(() => {
			console.log('打开音乐');
			innerAudioContext.play();
		});
	}
};

/**
 * 暂停/播放音乐
 */
const clickMusic = () => {
	musicPlay.value = !musicPlay.value;
	if (musicPlay.value) {
		console.log('打开音乐');
		innerAudioContext.play();
	} else {
		console.log('关闭音乐');
		innerAudioContext.pause();
	}
};

/**
 * 关闭装修弹框
 */
const closeRenovation = () => {
	showDecoration.value = false;
	query();
};

/**
 * 预览背景
 */
const previewBgc = (buyList) => {
	cemeteryBgUrl.value = buyList[0].decorationUrl;
};
</script>

<style lang="scss">
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.rotating-element {
	animation: rotate 5s linear infinite;
	animation-play-state: running; /* 默认运行动画 */
	animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */
}

.rotating-element.paused {
	animation-play-state: paused; /* 添加一个类来暂停动画 */
}

page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.ancestral_detail_bgc {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: -1;
}

.return_box {
	position: fixed;
	height: 88rpx;
	width: 100%;
	display: flex;
	align-items: center;
	padding-left: 22rpx;
	box-sizing: border-box;
	z-index: 999;
}

.templeContent {
	padding: 0;
}

.header {
	/* #ifdef APP || H5 */
	height: 88rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	height: 80rpx;
	/* #endif */
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 32rpx;
	box-sizing: border-box;

	.header_records {
		width: 180rpx;
		height: 64rpx;
		background: rgba(14, 14, 14, 0.25);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 64rpx;
		text-align: center;
		z-index: 999999;
	}

	.header_con {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.back {
			width: 64rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.tabs {
			font-size: 32rpx;
			color: #c5c5c5;
			display: flex;
			align-items: center;
			padding-left: 144rpx;
			width: 100%;
			height: 100%;

			view:nth-child(2) {
				padding-left: 64rpx;
			}
		}

		.header_icon {
			display: flex;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-left: 32rpx;
			}
		}
	}
}

.active {
	color: #fff !important;
}

.temple_detail_bgc {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}

.temple_detail {
	color: #fff;
	width: 100%;
	position: absolute;
	top: 9.3%;
	display: flex;
	align-items: center;
	flex-direction: column;

	.fixed_con_ {
		position: absolute;
		display: flex;
		flex-direction: column;
		position: absolute;
		align-items: center;
		width: 116rpx;
		left: 32rpx;
		top: 164rpx;

		image {
			width: 104rpx;
			height: 104rpx;
		}

		view {
			font-weight: 500;
			font-size: 18rpx;
			color: #ffffff;
			line-height: 18rpx;
			text-shadow: -1rpx -1rpx 0 #000, 1rpx -1rpx 0 #000, -1rpx 1rpx 0 #000, 1rpx 1px 0 #000;
			white-space: nowrap;
			margin-top: -20rpx;
			z-index: 999;
		}
	}

	.temple_detail_name {
		width: 372rpx;
		height: 176rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.temple_detail_name_text {
			font-family: '宋体';
			font-weight: 600;
			font-size: 52rpx;
			color: #ecb950;
			line-height: 62rpx;
			letter-spacing: 1px;
			direction: rtl;
			z-index: 2;
		}
	}
}

.temple_detail_tablet {
	.tablet_box {
		width: 54.93%;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		justify-items: center;
		top: 23.77%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
	}

	.temple_detail_tablet_item {
		width: 36rpx;
		height: 82rpx;
		display: inline-block;
		z-index: 3;
		display: flex;
		justify-content: center;
		position: relative;
		margin-bottom: -25rpx;

		&:last-child {
			margin-right: 0 !important;
		}

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.tablet_name {
			width: 100%;
			height: 100%;
			font-weight: 400;
			font-size: 12rpx;
			color: #f7cca1;
			display: flex;
			justify-content: center;
			/* #ifdef H5 */
			transform: scale(0.7);
			/* #endif */
			z-index: 0;
			/* #ifdef MP-WEIXIN */
			padding-top: 10rpx;
			/* #endif */
		}

		.tablet_name_chinese {
			/* #ifdef H5 */
			padding-top: 0;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding-top: 5rpx;
			/* #endif */
			letter-spacing: 3rpx;
			align-items: center;
			justify-content: space-between;
			white-space: nowrap;
			word-break: break-all;
			writing-mode: vertical-lr;
			/* #ifdef APP */
			padding-right: 3rpx;
			box-sizing: border-box;
			/* #endif */
		}
	}

	.temple_oblation {
		width: 60%;
		height: 64rpx;
		top: 44.8%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;

		.oblationRow {
			width: 100%;
			height: 64rpx;
			pointer-events: none;
		}

		swiper-item {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.jindeng_box {
		width: 68%;
		height: 64rpx;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
		top: 58%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}
}

.invite {
	background: rgba(0, 0, 0, 0.2);
	// width: 188rpx;
	padding: 0 16rpx;
	height: 54rpx;
	border-radius: 0 27rpx 27rpx 0;
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 35vh;
	left: 0;

	image {
		padding-left: 4rpx;
		width: 32rpx;
		height: 32rpx;
	}
}

.fixed {
	position: fixed;
	bottom: calc(constant(safe-area-inset-bottom));
	bottom: calc(env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	padding: 24rpx 32rpx;
	// padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
	// padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	z-index: 1;

	@media screen and (min-width: 992px) {
		width: 828rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.fixed_con {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 38rpx;
		flex-wrap: nowrap;
		height: 104rpx;
		margin-top: 72rpx;

		.fixed_con_ {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 42rpx;
				letter-spacing: 1px;
				text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
				text-stroke: 1px #8d5d2c;
				text-align: center;
				font-style: normal;
				text-transform: none;
				-webkit-text-stroke: 1px #8d5d2c;
				position: absolute;
				bottom: -8rpx;
			}
		}

		image {
			width: 104rpx;
			height: 104rpx;
		}
	}
}

.temple_detail_funcList {
	position: fixed;
	bottom: 10vh;
	z-index: 2;

	.temple_detail_fucItem {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 40rpx;
		font-weight: bold;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 20rpx;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 12rpx;
		}
	}
}

.texiao_box {
	.gif {
		position: absolute;
		left: 50%;
		bottom: 25vh;
		transform: translateX(-50%);
		z-index: 99;

		.gb,
		.jg {
			width: 450rpx;
		}
	}
}
</style>
